<!--
  病害详情-维修信息卡片

  props：
    title string 标题
    subtitle string 子标题
    date string 日期
    picture string 图片地址
    label array 标签 参数示例：[{ title: "待维修", color: "#3385FF" }]
-->
<template>
  <f7-list media-list class="qm-list">
    <f7-list-item
      :link="link"
      :title="title"
      :subtitle="subtitle"
      :text="date"
      @click="handleClickItem"
    >
      <img slot="media" :src="picture" width="75" />
      <div class="label" slot="footer">
        <van-tag
          v-for="(item, index) in label"
          :key="index"
          plain
          type="primary"
          :color="item.color"
        >
          {{item.title}}
        </van-tag>
      </div>
    </f7-list-item>
  </f7-list>
</template>

<script>
import { Tag } from "vant"
export default {
  name: "qm-repair-card",
  components: {
    [Tag.name]: Tag
  },
  props: {
    title: {
      type: String,
      default: "金园路-车行道"
    },
    subtitle: {
      type: String,
      default: "广州黄埔区广州市开发区税务局创意园"
    },
    date: {
      type: String,
      default: "2022-03-30 17:09:58"
    },
    picture: {
      type: String,
      default: require("/static/img/list/pic-xiangmu1.png")
    },
    label: {
      type: Array,
      default: () => [
        { title: "待维修", color: "#3385FF" },
        { title: "紧急", color: "#FE5555" },
        { title: "小修", color: "#3385FF" },
        { title: "日常巡查", color: "#3385FF" }
      ]
    },
    link: {
      type: String,
      default: "#"
    }
  },
  data () {
    return {}
  },
  methods: {
    handleClickItem(e) {
      const { title, subtitle, date, picture, label, link } = this;
      this.$emit("click-item", e, { title, subtitle, date, picture, label, link });
    }
  }
}
</script>

<style lang="less" scoped>
.qm-list {
  margin: 0;
  padding: calc(30px * var(--ratio)) 0;
  ::v-deep .item-content {
    padding-left: 0;

    .item-media {
      padding: 0;
    }
    .item-inner {
      padding: 0;

      .item-title-row {
        &::before {
          content: "";
          margin-top: 0;
          width: 12px;
          height: 18px;
          background-image: url("../../../../static/img/list/right-arrow.svg");
          background-repeat: no-repeat;
          background-size: contain;
          transform: translate(0, -50%);
        }
      }
      .item-title {
        font-size: var(--font-size-maintitle);
        color: var(--color-text-title);
        font-weight: 500;
        line-height: calc(50px * var(--ratio));
      }
      .item-subtitle {
        margin-top: calc(10px * var(--ratio));
        font-size: var(--font-size-subcontent);
        color: #61677A;
        line-height: calc(40px * var(--ratio));
      }
      .item-text {
        margin-top: calc(10px * var(--ratio));
        margin-bottom: calc(20px * var(--ratio));
        font-size: var(--font-size-subcontent-2);
        color: #61677A;
        line-height: calc(33px * var(--ratio));
      }
      .label {
        .van-tag {
          margin-right: calc(12px * var(--ratio));
          padding: calc(5px * var(--ratio)) calc(12px * var(--ratio));
        }
        .van-tag:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
